<template>
  <div id="qixiResult">
    <div class="top">
      <div class="item" @click="showRuleClick">活动规则</div>
      <div class="item" @click="showPaiClick">排行榜</div>
    </div>
    <!-- 我的录音 -->
    <div class="playVoice">
        <img :src="myVoice.headimgurl" />
        <div @click="playVoiceClick" class="voiceBg">
          <div :class="gifClass"></div>
          <div class="text">{{playText}}</div>
          <div class="lgtime">{{myVoice.lgTime}}s</div>
        </div>
    </div>
    <!-- 增加指数 -->
    <div class="addZhishu">
        <img @click="dianzanClick" :class="addImageClass" :src="pImga"  />
        <div class="zhishu">祝福指数：{{zanList.length}}</div>
        <!-- 召唤  逆袭 -->
        <!-- 自己点进来 -->
        <div v-if="myVoice2 == 1" @click="myShareClick" class="btnL">召唤好友祝福</div>
        <div v-if="myVoice2 == 1" @click="nixiClick" class="btnR">马上“逆袭”</div>
        <!-- 好友点进来 -->
        <div v-if="myVoice2 == 0" @click="iwantClick" class="btnC">我也要告白</div>
    </div>
    <!-- <div class="mygif"></div> -->
    <!-- 祝福小分队 -->
    <div class="zhufu">
        <div class="title">
            <div class="lineL"></div>
            <div class="text">祝福小分队</div>
            <div class="lineR"></div>
        </div>
        <div class="list">
            <div class="empty" v-if="zanList.length == 0">没有好友来祝福，邀请他们来见证吧!</div>
            <div v-else class="item" v-for="(item,index) in zanList" :key="index">
                <img :src="item['any_value(headimgurl)']" />
                <div class="name">{{item['any_value(nickname)']}}</div>
                <div class="pai">1</div>
            </div>
        </div>
    </div>
    <!-- 活动规则 -->
    <qixiguide></qixiguide>
    <!-- 排行榜-->
    <qixipai></qixipai>
    <!-- 分享引导 -->
    <qixishare></qixishare>
    <!-- 判断手机号 -->
    <div class="modal2" v-if="isShow2">
        <div class="modal-body">
            <div class="title">联系方式</div>
            <div class="text">每日排名第一的玩家，即获得秒台车免费代送给ta的鲜花一束，
                快准备好您的信息，冲击榜单吧!</div>
            <div class="line">
              <label>姓名</label>
              <input v-model="username" maxlength="8" placeholder="输入姓名" />
            </div>
            <div class="line">
              <label>电话</label>
              <input v-model="tel" type="tel" style="margin-bottom: 20px;" placeholder="输入手机号" />
            </div>
            <div @click="isShow2 = false" class="cancleBtn">取消</div>
            <div @click="okBtnClick" class="okBtn">确定</div>
        </div>
    </div>
    <!-- 第一名奖励 -->
    <div class="modal2" v-if="is_first">
        <div class="modal-body">
            <div class="title">联系方式</div>
            <div class="text">恭喜您获得免费代送鲜花奖励，请填写收花人姓名、手机号和收获地址，以及您对他/她的留言!</div>
            <div class="line">
              <label>姓名</label>
              <input v-model="name" maxlength="8" placeholder="输入姓名" />
            </div>
            <div class="line">
              <label>电话</label>
              <input v-model="tel2" type="tel" style="margin-bottom: 20px;" placeholder="输入手机号" />
            </div>
            <div class="line">
              <label>地址</label>
              <input v-model="address" maxlength="200" style="margin-bottom: 20px;" placeholder="输入地址" />
            </div>
            <div class="line">
              <label>留言</label>
              <input v-model="remark" maxlength="200" style="margin-bottom: 20px;" placeholder="输入留言" />
            </div>
            <div @click="is_first = false" class="cancleBtn">取消</div>
            <div @click="updateInfo" class="okBtn">确定</div>
        </div>
    </div>
  </div>
</template>

<script>
import Qixiguide from '@/components/common/qixguide.vue'
import Qixipai from '@/components/common/paihang.vue'
import Qixishare from '@/components/common/share2.vue'
export default {
  name: 'qixiResult',
  data () {
    return {
      openid: '',
      myVoice: {},
      pImga: require('../../assets/images/icon_zhan.png'),
      zanList: [],
      from_openid: '',
      gifClass: 'mygif2',
      playText: '点击播放告白',
      addImageClass: '',
      usertel: '',
      isShow2: false,
      tel: '',
      username: '',
      wexinInfo: {},
      myVoice2: 0,
      is_first: false,
      name: '',
      address: '',
      tel2: '',
      remark: '',
    }
  },
  components: {
    Qixiguide,
    Qixipai,
    Qixishare
  },
  mounted(){

  },
  activated(){
    this.wexinInfo = JSON.parse(localStorage.getItem('wexinInfo'));
    this.from_openid = localStorage.getItem('fromopenid') || '';
    this.openid = this.wexinInfo.openid || '';
    this.wx_config();
    this.getData();
    this.is_firstPai();
  },
  methods: {

    // 是不是 第一名
    is_firstPai(){
      var self = this;
      self.$axios.get('is_first',{
        params: {
          openid: self.wexinInfo.openid || ''
        }
      }).then(function (res){
        console.log(res.data.results.length);
        if (res.data.results.length > 0) {
          self.is_first = true;
        } else {
          self.is_first = false;
        }
      }).catch(function (err){

      })
    },
    updateInfo(){
      var self = this;
      if (self.name == '') {
        alert('请输入姓名');
        return;
      }
      if (!self.$utils.checkTel(self.tel2)) {
        alert('请输入正确的手机号');
        return;
      }
      if (self.address == '') {
        alert('请输入收货地址');
        return;
      }
      self.$axios.get('add_first',{
        params: {
          openid: self.wexinInfo.openid || '',
          name: self.name,
          address: self.address,
          tel: self.tel2,
          remark: self.remark,
        }
      }).then(function (res){
        if (res.data.results.length > 0) {
          self.is_first = true;
          alert('提交成功!');
        } else {
          self.is_first = false;
        }
      }).catch(function (err){

      })
    },

    // 显示规则
    showRuleClick:function(){
      this.$HUB.$emit('showGuide');
    },
    isTelOK: function(){
      var self = this;
      self.$axios.get('userInfo3',{
        params: {
          openid: self.openid || ''
        }
      }).then(function (res){
        if(res.data.status == 100){
          self.usertel = res.data.data.usertel;
          if (self.usertel == '') {
            self.isShow2 = true;
          }else{
            self.isShow2 = false;
            setTimeout(function(){
                self.$HUB.$emit('showPai');
            },200);
          }
        }else{
            self.isShow = true;
        }
      }).catch(function (err){

      })
    },
    // 确定输入手机号
    okBtnClick: function(){
      var self = this;
      if (self.username == '') {
        alert('请输入您的姓名');
        return;
      }
      if (!self.$utils.checkTel(self.tel)) {
        alert('请输入正确的手机号');
        return;
      }
      self.$axios.get('adduserInfo3',{
        params: {
          openid: self.openid || '',
          usertel: self.tel
        }
      }).then(function (res){
        self.isShow2 = false;
        setTimeout(function(){
            self.$HUB.$emit('showPai');
        },200);
      }).catch(function (err){

      })
    },
    // 显示排行榜
    showPaiClick: function(){
      this.isTelOK();
    },
    // 召唤
    myShareClick: function(){
      this.$HUB.$emit('showShare');
    },
    // 逆袭
    nixiClick: function(){
      window.location.href = 'https://m.suning.com/search/%E7%A7%92%E5%8F%B0%E8%BD%A6%E6%97%97%E8%88%B0%E5%BA%97/';
    },
    // 我也要告白
    iwantClick:function(){
      var url = this.$utils.shareLink2;
      window.location.replace(url);
    //   this.$router.replace(url);
    },
    // 点赞
    dianzanClick: function(){
        var self = this;
        var fopenid = '';
        self.addImageClass = 'animate bounceIn';
        // return;
        if (self.from_openid == '') {
            fopenid = self.openid || '';
        } else {
            fopenid = self.from_openid || '';
        }
        // 获取我的录音
        self.$axios.get('is_zan',{
          params: {
            openid: self.openid || '',
            from_openid: fopenid
          }
        }).then(function (res){
            // alert(JSON.stringify(res));
            if (res.data.status == 100) {
              self.geidianzan();
            }else{
              self.addImageClass = '';
              if ((res.data.nowTime - res.data.results.create_time) > 86000) {
                self.geidianzan(); // 24小时后可以 再次点赞
              } else {
                alert('你已经点过赞咯~');
              }
            }
        }).catch(function (err){

        })
    },
    // 给别人点赞
    geidianzan: function(){
        var self = this;
        var fopenid = '';
        if (self.from_openid == '') {
            fopenid = self.openid || '';
        } else {
            fopenid = self.from_openid || '';
        }
        // 获取我的录音
        self.$axios.get('dianzan',{
          params: {
            openid: self.openid || '',
            from_openid: fopenid,
            headimgurl: self.wexinInfo.headimgurl || '',
            nickname: self.wexinInfo.nickname || ''
          }
        }).then(function (res){
          // alert(JSON.stringify(res));
          if (res.data.status == 100) {
            self.addImageClass = '';
            alert('点赞成功!');
            location.reload();
          }else{
            self.addImageClass = '';
            alert('点赞失败!');
          }
        }).catch(function (err){

        })
    },
    getData: function(){
        var self = this;
        var openid = self.openid || '';
        var shareOpenid = '';
        if (self.from_openid == '') {
            // alert('shareOpenid1 = ' + openid);
            shareOpenid = openid;
        } else {
            // alert('shareOpenid2 = ' + self.from_openid);
            shareOpenid = self.from_openid;
        }
        // 获取我的录音
        self.$axios.get('getvoice',{
            params: {
                openid: shareOpenid,
                // openid: 'oU7OT0qpKBGkBE1vViGkcCbejC-Q'
            }
        }).then(function (res){
            // alert(JSON.stringify(res));
            if (res.data.status == 100) {
                self.myVoice = res.data.data;
            }
        }).catch(function (err){

        });

        // 获取我的录音
        self.$axios.get('getvoice',{
            params: {
                openid: self.openid || ''
                // openid: 'oU7OT0qpKBGkBE1vViGkcCbejC-Q'
            }
        }).then(function (res){
            // alert(JSON.stringify(res));
            if (res.data.status == 100) {
                self.myVoice2 = 1;
            }
        }).catch(function (err){

        });

        // 获取我的点赞
        self.$axios.get('my_zan',{
            params: {
                from_openid: shareOpenid,
                // from_openid: 'oU7OT0qpKBGkBE1vViGkcCbejC-Q'
            }
        }).then(function (res){
            // alert(JSON.stringify(res));
            if (res.data.status == 100) {
                self.zanList = res.data.results;
            }
        }).catch(function (err){

        })
    },
    // 播放录音
    playVoiceClick: function(){
      var self = this;
      var amr = new this.$BenzAMRRecorder();
      var amrUrl = this.myVoice.voiceUrl;
      amr.initWithUrl(amrUrl).then(function() {
        self.gifClass = 'mygif';
        self.playText = '播放中';
        amr.play();
      });
      amr.onEnded(function() {
        self.gifClass = 'mygif2';
        self.playText = '点击播放告白';
        console.log('播放完毕');
      })
    },
    // 微信配置
    wx_config: function(){
      var self = this;
      var pageUrl = self.$utils.getBaseUrl();
      self.$axios.get('wx_config2',{
        params: {
          pageUrl: pageUrl
        }
      }).then(function (res){
      	 var data = res.data;
        wx.config({
          debug: false,
          appId: data.appId,
          timestamp: data.timestamp,
          nonceStr: data.nonceStr,
          signature: data.signature,
          jsApiList: [
              'onMenuShareTimeline',
              'onMenuShareAppMessage'
            ]
        });
        wx.ready(function(){
          console.log('ready');
          var from_openid = self.from_openid;
          var openid = self.openid || '';
          var shareOpenid = '';
            if (from_openid == '') {
                shareOpenid = openid;
            } else {
                shareOpenid = from_openid;
            }
          self.$utils.shareData2.link = self.$utils.shareLink2 +'?openid=' + shareOpenid;
          // alert('self.$utils.shareData2.link = ' + self.$utils.shareData2.link);
          // 微信好友分享
          wx.onMenuShareAppMessage(self.$utils.shareData2);
          // 朋友圈分享
          wx.onMenuShareTimeline(self.$utils.shareData2);
          wx.error(function(res){
    		console.log('失败');
          });
        });
      }).catch(function (error) {

      });
  	},
  },
}
</script>
<style scoped lang="less">
.modal2{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  .modal-body{
    width: 750px;
    height: 1037px;
    border-radius: 12px;
    margin: auto;
    text-align: center;
    font-size: 40px;
    color: #333333;
    padding-bottom: 20px;
    background-image: url(../../assets/images/qi_guide_02.png);
    background-position: center center;
    background-size: 750px 1037px;
    background-repeat: no-repeat;
    .title{
      color: #5c2424;
      padding-top: 22px;
    }
    .text{
        font-size: 30px;
        color: #444444;
        margin: auto;
        text-align: left;
        width: 500px;
        padding-top: 20px;
        line-height: 50px;
        margin-bottom: 30px;
        color: #5c2424;
    }
    .line{
      label {
        display: inline-block;
        width: 120px;
        margin-bottom: 40px;
        color: #5c2424;
      }
      input {
        margin-top: 20px;
        padding: 0 10px;
        height: 88px;
        line-height: 88px;
        border: solid 1px #999999;
        outline: none;
        border-radius: 8px;
        width: 400px;
        border: solid 1px #873636;
        border-radius: 4px;
      }
    }
    .cancleBtn{
      display: inline-block;
      width: 180px;
      height: 80px;
      line-height: 80px;
      box-shadow: 0 0 0 1px #cb5364;
      border-radius: 30px;
      border: solid 3px white;
      background-color: #cb5364;
      border-radius: 40px;
      color: white;
      font-size: 30px;
      margin-top: 50px;
    }
    .okBtn{
      width: 180px;
      height: 80px;
      line-height: 80px;
      display: inline-block;
      box-shadow: 0 0 0 1px #cb5364;
      border-radius: 30px;
      border: solid 3px white;
      background-color: #cb5364;
      border-radius: 40px;
      color: white;
      font-size: 30px;
      margin-top: 50px;
    }
  }
}
@keyframes mymove
{
    0% {
        background-image: url(../../assets/images/icon1.png);
    }
    50% {
        background-image: url(../../assets/images/icon2.png);
    }
    100% {
        background-image: url(../../assets/images/icon3.png);
    }
}
.mygif{
    width: 40px;
    height: 40px;
    animation: mymove 1.2s infinite;
    -webkit-animation: mymove 1.2s infinite;
    // background-image: url(../../assets/images/icon1.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    // background-color: red;
    float: left;
    margin-left: 30px;
    margin-top: 20px;
}
.mygif2{
    width: 40px;
    height: 40px;
    background-image: url(../../assets/images/icon3.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    float: left;
    margin-left: 30px;
    margin-top: 20px;
}
#qixiResult{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url('../../assets/images/bg03.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.top{
  color: #873636;
  font-size: 28px;
  height: 40px;
  margin-right: 40px;
  margin-top: 60px;
  .item{
    float: right;
    width: 150px;
    text-align: center;
    height: 40px;
  }
}
.playVoice{
    width: 100%;
    position: absolute;
    top: 200px;
    height: 94px;
    img {
        width: 94px;
        height: 94px;
        float: left;
        border-radius: 50%;
        margin-left: 40px;
        margin-right: 10px;
    }
    .voiceBg{
        float: left;
        width: 410px;
        height: 80px;
        line-height: 80px;
        padding-right: 40px;
        margin-top: 5px;
        background-image: url(../../assets/images/icon_play.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 453px 80px;
        color: white;
        text-align: right;
        font-size: 30px;
        .text{
          float: left;
          margin-left: 20px;
        }
    }
}
.addZhishu{
    width: 100%;
    position: absolute;
    text-align: center;
    height: 200px;
    top: 320px;
    img{
        width: 110px;
        height: 110px;
    }
    .zhishu{
        color: #5d3830;
        font-family: SourceHanSansCN-Medium;
        font-size: 30px;
        width: 100%;
        margin-bottom: 40px;
    }
    .btnL{
        float: left;
        width: 250px;
        height: 60px;
        box-shadow: 0 0 0 1px #b9cce9;
        border-radius: 30px;
        border: solid 3px white;
        background-color: #b9cce9;
        border-radius: 29px;
        font-family: SourceHanSansCN-Regular;
        color: #59687e;
        font-size: 30px;
        line-height: 60px;
        margin-left: 100px;
    }
    .btnR{
        float: left;
        width: 250px;
        height: 60px;
        margin-left: 50px;
        box-shadow: 0 0 0 1px #fdad81;
        border-radius: 30px;
        border: solid 3px white;
        background-color: #fdad81;
        border-radius: 29px;
        font-family: SourceHanSansCN-Regular;
        color: #a46340;
        font-size: 30px;
        line-height: 60px;
    }
    .btnC{
      width: 250px;
      height: 60px;
      margin: auto;
      box-shadow: 0 0 0 1px #fdad81;
      border-radius: 30px;
      border: solid 3px white;
      background-color: #fdad81;
      border-radius: 29px;
      font-family: SourceHanSansCN-Regular;
      color: #a46340;
      font-size: 30px;
      line-height: 60px;
    }
}
.zhufu{
    position: absolute;
    top: 650px;
    width: 100%;
    .title{
        width: 100%;
        text-align: center;
        height: 40px;
        .text{
            width: 100%;
            height: 33px;
            font-family: SourceHanSansCN-Bold;
            font-size: 34px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 14px;
            letter-spacing: 0px;
            color: #59332b;
            text-align: center;
        }
    }
    .list{
        width: 605px;
        height: 422px;
        overflow-y: scroll;
        margin: auto;
        background-color: white;
        border-radius: 4px;
        padding: 0 20px;
        .empty{
            color: #59332b;
            font-family: SourceHanSansCN-Regular;
            font-size: 30px;
            margin-top: 20px;
        }
        .item{
            height: 75px;
            background-color: white;
            margin-bottom: 10px;
            width: 100%;
            height: 75px;
            line-height: 75px;
            color: #59332b;
            font-size: 30px;
            border-bottom: solid 1px #dddddd;
            font-weight: 300;
            img{
                float: left;
                width: 55px;
                height: 55px;
                border-radius: 50%;
                margin-top: 10px;
                margin-left: 20px;
            }
            .name{
                float: left;
                margin-left: 20px;
                font-family: SourceHanSansCN-Regular;
                color: #59332b;
            }
            .pai{
                float: right;
                margin-right: 10px;
                padding-right: 40px;
                background-image: url(../../assets/images/icon_lave.png);
                background-position: right center;
                background-repeat: no-repeat;
                background-size: 35px 30px;
            }
        }
    }
}
</style>
